<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>私人空间</title>
    <link rel="stylesheet" th:href="@{/static/layui/js/css/layui.css}">
    <script th:src="@{/static/layui/js/layui.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/vue.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/axios.min.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/jquery/jquery.js}" charset="UTF-8" type="text/javascript"></script>
    <style>
        .layui-bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--导航-->
        <ul class="layui-nav layui-bg-green"  lay-bar="disabled">
            <li class="layui-nav-item layui-nav-itemed" lay-unselect>
                <a class="layui-font-20" style="color: white;vertical-align: middle">私人空间</a>
            </li>

            <li class="layui-nav-item" >
                <ul class="layui-nav layui-bg-green">

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" href="">首页</a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" href="">留言</a>
                    </li>

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="layui-font-18" href="">相册</a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" href="">视频</a>
                    </li>
                </ul>

            </li>



            <!--个人信息导航-->
            <li class="layui-nav-item layui-layout-right"  style="margin-right: 50px">
                <a href="">
                    <!--个人头像,由后端动态显示-->
                    <img th:src="@{/static/img/test/IMG_1008.jpg}" class="layui-nav-img">我</a>
                    <!--简易化个人信息导航-->
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">个人中心</a></dd>
                        <dd><a href="javascript:;">退出登录</a></dd>
                    </dl>
                </a>

            </li>

        </ul>











<!--信息主体根标签-->
<div class="layui-bg-gray" style="padding: 30px;background-color: #F2F2F2" >
    <div class="layui-container layui-row layui-bg-gray" style="width: 1480px;min-height: 1080px;" >
        <div class="layui-panel">
            <div class="layui-card-header" >

                <a class="layui-font-16 layui-bold">
                    相册
                </a>
            </div>
            <div class="layui-card-body">
                <!--上传按钮-->
                <button type="button" class="layui-btn" id="upload_button">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>

                <!--批量管理按钮-->
                <button type="button" class="layui-btn" id="batch">
                    <i class="layui-icon">&#xe610;</i>批量管理
                </button>

                <div class="layui-row layui-col-space10" style="margin-top: 10px">
                    <div class="site-demo-flow" id="picture"></div>

                </div>

                <!--单行照片展示-->
<!--                <div class="layui-row layui-col-space10" style="margin-top: 10px">-->
<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                &lt;!&ndash;相册的名字&ndash;&gt;-->
<!--                                <a href="">1</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->

<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">2</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">3</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">4</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">5</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">6</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->

<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                &lt;!&ndash;相册的名字&ndash;&gt;-->
<!--                                <a href="">1</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->

<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">2</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">3</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">4</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">5</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                    <div class="layui-col-md2">-->
<!--                        <div class="layui-panel" style="width: 210px;height: 250px">-->
<!--                            <div class="layui-card-header">-->
<!--                                <a href="">6</a>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body">-->

<!--                                <img src="/static/img/test/IMG_1008.jpg" style="width: 180px;height: 180px">-->


<!--                            </div>-->
<!--                        </div>-->


<!--                    </div>-->


<!--                </div>-->




            </div>

        </div>


    </div>









</div>


<!--自定义脚本-->
<script th:src="@{/static/private-space-picture.js}" type="text/javascript"></script>


<!--信息获取接口-->
<!--信息获取API为前缀+id号-->

<!--后端服务器用户头像获取接口前缀-->
<form th:action="@{/download/image/message/}" id="message_owner_image_download"></form>

<!--后端服务器空间头像获取接口前缀-->
<form th:action="@{/download/space/image/}" id="space_owner_image_download"></form>

<!--后端服务器图片获取接口前缀-->
<form th:action="@{/download/space/picture/}" id="space_picture_download"></form>

<!--信息上传接口-->
<!--信息上传API为前缀+id号-->

<!--留言长传接口-->
<form th:action="@{/upload/space/commit/}" id="space_commit_upload"></form>

</body>
</html>